import React from 'react'
import ReactDOM from 'react-dom'

// 1. 准备表达式
const age = 18
const obj = {
  address: '河南',
}
const arr = ['ifer', 'elser']

const show = () => {
  return 'Hello React'
}

const h1Ele = <h1>今天星期一，全校升国旗</h1>

// 2. 在单大括号内部使用表达式
const ele = (
  <div>
    <p>简单变量：{age}</p>
    {/* 对象不能直接作为表达式直接使用 */}
    {/* <p>{obj}</p> */}
    <p>对象中的属性：{obj.address}</p>
    <p>数组中的某一项：{arr[0]}</p>
    <p>整个数组：{arr}</p>
    <p>方法调用：{show()}</p>
    <div>JSX 本身也是表达式：{h1Ele}</div>
  </div>
)

ReactDOM.render(ele, document.querySelector('#root'))
